<!-- 百人(大逃杀) -->
<template>
  <el-dialog v-if="show" :model-value="props.show" :title="GameName(indexStore.gameArray, 100002) + $t('381')" class="hund-dialog" top="10vh"
    :close-on-click-modal="false" :close-on-press-escape="false" @close="onHideDetails">
    <el-form :model="data" ref="ruleFormRef" :rules="data.rules" :validate-on-rule-change="false"
      :disabled="isDisableUser">
      <form-item :title="t('41')" value="game_name">
        <div class="gameIcon">
          <div class="flex marginR5">
            <el-tag size="small">{{ GamePlatform(indexStore.gameArray, 100002) }}</el-tag>
            <img class="game-icon" :src="selectToLabel(GAMEICON, 100002)" alt="">
          </div>
          {{ GameName(indexStore.gameArray, 100002) }}
        </div>
      </form-item>
      <form-item :title="$t('884')" :pass="true" value="a_hundred_pump">
        <el-input-number size="large" :min="0" :max="100" v-model="data.a_hundred_pump" :precision="4"
        clearable controls-position="right" />%
      </form-item>
      <form-item :title="$t('260')" :pass="true" value="a_hundred_amount" :subtract="!props.isDisableUser" @addItem="addPressure" >
        <div class="flexWrap margin5" v-for="(item, index) in data.pressureList" :key="index">
          <el-input-number size="large" v-model="item.num":precision="2"
           class="marginT10" clearable controls-position="right" />
           <div v-show="!props.isDisableUser" class="reduce-btn reduce-btn_new marginL5" @click="reducePressure(index)">-</div>
        </div>
      </form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer" v-show="!props.isDisableUser">
        <el-button @click="onHideDetails">{{ $t('240') }}</el-button>
        <el-button type="primary" @click="gameSet(ruleFormRef)">{{ $t('241') }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import FormItem from '@/components/FormItem/FormItem.vue'
import { getHundredConfig, updateHundredConfig } from '@/api/settion'
import { GAMEICON } from '@/config/eunm'
import { throttle,selectToLabel, GamePlatform, GameName } from '@/utils/index'

import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import { useStore } from '@/stores/index'
const indexStore = useStore()

const props = defineProps({
  show: Boolean, //  弹框显示
  isDisableUser: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  checkedItem: {
    type: Object,
    default: () => {
      return {}
    }
  },
  query: {
    type: Object,
    default: () => {
      return {
        id: 0, // 飞机 id 
        type: 0, //查看1 或者编辑0
        agent_id: 0, // 商户id
        game_id: 0, // 游戏id
        game_name: '', // 游戏名称
      }
    }
  }
})

const data = reactive({
  id: 0,
  game_id: 0,
  agent_id: 0,
  game_name: '',
  a_hundred_pump: 0, // 抽水比例
  a_hundred_amount: '', // 押注金额
  pressureList: [] as any[], // 押注金额
  rules: {
    a_hundred_pump: [{ required: true, message: t('19'), trigger: 'blur' }],
  },
})

watch(
  () => [props.checkedItem, props.show],
  async (value) => {
    if (value[0]) {
      Object.assign(data, props.checkedItem)
    }
    if (value[1]) {
      chooseOperator(props.checkedItem.agent_id, props.checkedItem.game_id) // 获取运营商配置
    }
  }
)

// 选择运营商
const chooseOperator = async (id: number, game_id: number) => {
  let res = await getHundredConfig({ agent_id: id, game_id: game_id });
  Object.assign(data, res.data)
}

// 保存
const ruleFormRef = ref<FormInstance>()
const gameSet = throttle(async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      await updateHundredConfig(data);
      ElMessage.success(t('342'))
      emit('onHideDetails', true)
    }
  })
}, 3000)

// 新增押注倍数
const addPressure = () => {
  data.pressureList.push({ num: 0 })
}
// 减少押注倍数
const reducePressure = (index:number) => {
  if (!index && data.pressureList.length == 1) {
    return ElMessage.error('最少保留一个押注额度！')
  }
  data.pressureList.splice(index, 1)
}

// 取消
const emit = defineEmits(['onHideDetails'])
const onHideDetails = () => {
  emit('onHideDetails', false)
}
</script>
<style scoped lang="scss">
.xz-label {
  width: 220px;
  font-size: 16px;
  font-weight: bold;
  padding: 15px 0 0 10px
}
</style>
<style lang="scss">
.hund-dialog .el-dialog__body {
  height: 650px;
  overflow: auto
}
</style>
